Day24 CSS多欄位排版＆動畫效果

2024 iThome 鐵人賽

DAY 24

佛心分享-IT 人自學之術

新手踏入網頁前端的世界系列第 24 篇

16th鐵人賽

zhiz

2024-09-28 20:56:01

24 瀏覽

分享至

今天要介紹CSS多欄位排版

columns設定欄位數量(數字)和欄位寬度(px)。
column-gap設定欄位間距(px)。
column-rule 設定欄位間的分隔線，寫入顏色、線條樣式、寬度。
break-before設定在區塊前面插入換欄(column)或換頁。
break-after設定在區塊後面插入換欄(column)或換頁。
break-inside設定在區塊裡面插入換欄(column)或換頁。
column-span設定跨欄顯示，寫入all(跨所有欄位數顯示)。

接著是動畫處理

利用CSS來做出動畫的效果～

transform將顯示區塊旋轉，如：rotate(35deg)順時針旋轉35度。
transform-orgin 設定旋轉的原點位置，如：right bottom以右下角為原點來旋轉。

transform2D動畫

以下介紹其方法：

translate設定區塊位移(x, y)。
rotate設定順時鐘旋轉度數(deg，degree縮寫)，可以為負值。
scale設定區塊放大倍數、高度放大倍數。
skew設定區塊x軸旋轉度數、y軸旋轉度數。
transition設定動畫時間(s，秒數)。
實作範例
hover 為滑鼠游標停在該標籤上的狀態 (虛擬類別選擇器)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D動畫</title>
    <style>
        p{
            width: 250px; height: 50px;
            background-color: rgb(115, 170, 152);
        }
        p:hover{
            transform: rotate(180deg);
            transition: 5s;
        }
        div{
            width: 300px; height:100px;
            background-color: rgb(115, 170, 152);
        }
        div:hover{
            width: 600px; height:200px;
            background-color: rgb(125, 115, 170) ;
            transition: 5s;
        }
    </style>
</head>
<body>
    <h4>將滑鼠游標停在顏色區塊上會呈現動畫效果哦！</h4>
    <p>阿囉哈～旋轉～跳躍～我閉著眼～</p>
    <div>我是小方～擁有變色和變大的技能</div>
</body>
</html>

網頁呈現畫面: http://127.0.0.1:5500/transform%202D.html

transform3D動畫

類似於2D的方法，不同之處在於動畫的呈現方式、旋轉方向。

rotateX 將x軸固定並做旋轉(上下)。
rotateY 將y軸固定並做旋轉(左右)。
實作範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D動畫</title>
    <style>
        p{
            width: 120px; height: 120px;
            text-align: center;
            background-color: rgb(172, 220, 151);
        }
        p:hover{
            transform: rotateY(180deg);
            transition: 5s;
        }
        div{
            width: 120px; height: 120px;
            text-align: center;
            background-color: rgba(239, 242, 82, 0.952);
        }
        div:hover{
            transform: rotateX(180deg);
            transition: 5s;
        }
    </style>
</head>
<body>
    <h4>將滑鼠游標停在顏色區塊上會呈現動畫效果哦！</h4>
    <p>左右旋轉</p>
    <div>上下旋轉</div>
    
</body>
</html>

網頁呈現畫面: http://127.0.0.1:5500/transform%203D.html